<template>
  <view class="select_time">
    <view class="example-body">
      <view class="ad_box" v-if="exclusiveList.length" @click="skipPage('top')">
        <img :src="exclusiveList[0].adPicture" alt="" />
      </view>
      <view class="date_box" @click="open">
        <view> {{ date }}</view>
        <img
          class="icon-arrow"
          src="@/static/images/calendar/icon-arrow.png"
          alt=""
        />
      </view>
      <uni-calendar
        ref="calendar"
        class="uni-calendar--hook"
        @changeDay="chooseDayJi"
        :clear-date="true"
        :date="info.date"
        :selected="info.selected"
        :insert="info.insert"
        :lunar="info.lunar"
        :startDate="info.startDate"
        :endDate="info.endDate"
        :range="info.range"
        @confirm="confirm"
        @close="close"
        @monthSwitch="monthSwitch"
      />
    </view>

    <new_huangLi
      style="margin-top: 48rpx"
      @changeDate="changeDate"
      @changeTab="changeTab"
      :dayDetail="dayDetail"
    ></new_huangLi>

    <view
      v-if="!$_.isEmpty(dayDetail.todayLuck)"
      class="ever_title"
      style="position: relative"
      >近三日运势
      <!-- <view class="login_tip" @click="login"> 请登录后查看你的运势 </view> -->
    </view>

    <view
      style="overflow: hidden"
      v-if="!$_.isEmpty(dayDetail.todayLuck)"
      class="card hourCard"
    >
      <!-- <view class="overly_box" v-if="!this.$store.state.user.hasLogin">
     
      </view> -->
      <view
        class="luck-box"
        v-for="(item, index) in dayDetail.luckList"
        :key="index + 'a'"
      >
        <view class="luck-today"
          >{{ index === 0 ? "今" : index === 1 ? "明" : "后" }}日运势</view
        >
        <uvLineProgress
          :style="!$store.state.user.hasLogin ? 'filter:blur(4px)' : ''"
          activeColor="#CA4336"
          inactiveColor="#F9F9F9"
          :percentage="item.score"
        ></uvLineProgress>
        <view
          :style="!$store.state.user.hasLogin ? 'filter:blur(4px)' : ''"
          class="luck-score"
        >
          {{ item.score }}分</view
        >
      </view>

      <view
        v-for="(item, index) in dayDetail.luckList"
        :key="index"
        class="luck_detail"
      >
        <view class="yunshi-login-btn" @click="login" v-if="!$store.state.user.hasLogin"> 请登录后查看你的运势 </view>
        <view style="margin-top: 36rpx; color: #262626"
          >{{ index === 0 ? "今" : index === 1 ? "明" : "后" }}日运势</view
        >
        <view
          :style="!$store.state.user.hasLogin ? 'filter:blur(4px)' : ''"
          style="margin-top: 22rpx"
        >
          流日运势-{{ item.score }}分
        </view>
        <view :style="!$store.state.user.hasLogin ? 'filter:blur(4px)' : ''">
          十神{{ item.shiShen }}-{{ item.shiShenDesc }}
        </view>
        <view :style="!$store.state.user.hasLogin ? 'filter:blur(4px)' : ''">
          财位- {{ item.dayPositionCaiDesc }}方</view
        >
        <view :style="!$store.state.user.hasLogin ? 'filter:blur(4px)' : ''">
          桃花位-{{ item.taoHua }}方
        </view>
      </view>
    </view>
    <view
      v-if="$store.state.user.hasLogin"
      class="dress_bottom"
      @click="changeTab(1)"
    >
      更多运势建议，点击跳转专属页即可查看
    </view>
    <view class="ever_title">五行穿行与饰品</view>
    <view class="card hourCard" v-if="!$_.isEmpty(dayDetail)">
      <view class="dress_box">
        <img
          :src="
            '../../../../static/images/calendar/icon-' +
            dayDetail.dressYi.description +
            '.png'
          "
          alt=""
        />
        <view>{{ dayDetail.dressYi.title }}</view>
      </view>
      <view class="dress_content">{{ dayDetail.dressYi.content }}</view>
      <view class="dress_box" style="margin-top: 34rpx">
        <img
          :src="
            '../../../../static/images/calendar/icon-' +
            dayDetail.dressJi.description +
            '.png'
          "
          alt=""
        />
        <view>{{ dayDetail.dressJi.title }}</view>
      </view>
      <view class="dress_content">{{ dayDetail.dressJi.content }}</view>
    </view>

    <view class="ever_title">今日五行八字</view>
    <xingBox :dayDetail="dayDetail"></xingBox>

    <view class="ever_title">老黄历信息</view>
    <oldHuangLi :dayDetail="dayDetail"></oldHuangLi>
    <view
      style="margin-top: 45rpx"
      v-if="exclusiveList.length > 1"
      class="ad_box"
      @click="skipPage('bottom')"
    >
      <img :src="exclusiveList[1].adPicture" alt="" />
    </view>
    <activity-box :positionId="903"></activity-box>
  </view>
</template>

<script>
import {
  getYellowCalendarApi,
  getMonthYiApi,
  getExclusiveApi,
} from "@/http/api";
import uniCalendar from "../uni-calendar/components/uni-calendar/uni-calendar.vue";
import uvLineProgress from "uni_modules/uv-line-progress/components/uv-line-progress/uv-line-progress";
import new_huangLi from "../huangLi/new_huangLi.vue";
import xingBox from "../xingBox/xingBox.vue";
import oldHuangLi from "../oldHuangLi/oldHuangLi";

export default {
  props: {
    exclusiveList: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    uniCalendar,
    uvLineProgress,
    new_huangLi,
    xingBox,
    oldHuangLi,
  },
  data() {
    return {
      exclusive: {},
      //月份信息
      MonthInfo: {},
      Month: "",
      //日期配置
      info: {
        lunar: true,
        range: false,
        insert: false,
        selected: [],
      },

      radio: 0,
      chartData: {},
      option: {},

      chartChoose: [
        {
          text: "爱情",
          value: 0,
        },
        {
          text: "财运",
          value: 1,
        },
        {
          text: "事业",
          value: 2,
        },
      ],
      date: "",
      dayDetail: {},
    };
  },
  // onReady() {
  //   this.getServerData();
  // },

  created() {
    this.getNowTime();

    this.getExclusive();
  },

  onLoad() {},

  computed: {
    getLunar() {
      //过滤掉前五个字符，和后4个字符
      if (!this.$_.isEmpty(this.dayDetail)) {
        return this.dayDetail.lunar.slice(7);
      }
    },
    getBazi() {
      return function (item) {
        //截取前三个字符
        return item.slice(0, 3);
      };
    },
  },
  methods: {
    skipPage(e) {
      window.open(
        e === "top"
          ?  + this.exclusiveList[0].jumpUrl
          : this.exclusiveList[1].jumpUrl
      );
    },

    changeTab(index) {
      this.$emit("changeTab", index);
    },

    login() {
      //使用父组件的login方法

      this.$emit("openModal");
    },

    //上下切换日期
    changeDate(e) {
      //在this.date的基础上加减一天,然后重新请求数据
      let date = new Date(this.date);
      if (e == "pre") {
        date = date.setDate(date.getDate() - 1);
      } else {
        date = date.setDate(date.getDate() + 1);
      }
      this.date = new Date(date).toISOString().slice(0, 10);
      this.getYellowResult();
    },

    //获取个人专属
    getExclusive() {
      //如果未登录,则不请求

      if (!this.$store.state.user.hasLogin) {
        return;
      }
      getExclusiveApi({
        birthDay: uni.getStorageSync("userInfo").birthDay || "",
      }).then((res) => {
        const { code, data } = res;
        if (code == 200) {
          this.exclusive = data;
        }
      });
    },

    getDeg(index) {
      return (index + 1) * 30 - 30 + "deg";
    },

    getMonthInfo(condition) {
      getMonthYiApi({
        stringDate: this.Month,
        condition: condition,
      }).then((res) => {
        const { montYiJi, code, monthHoliday } = res;
        if (code == 200) {
          let newList = monthHoliday.map((item) => {
            return {
              date: item.holidayDate,
              info: item.holidaylName,
              showSelect: false,
            };
          });
          let list = montYiJi.map((item) => {
            //同时遍历newList,如果有相同的日期,则将showSelect改为true
            newList.forEach((item2) => {
              if (item2.date == item) {
                item2.showSelect = true;
              }
            });
            return { date: item, showSelect: true };
          });
          this.info.selected = [...list, ...newList];
        }
      });
    },

    chooseDayJi(e) {
      if (e == 9) {
        //关闭日历,初始化数据
        this.info.selected = [];
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        this.Month = `${year}-${month < 10 ? "0" + month : month}`;
        return;
      }
      let list = ["出行", "祈福", "交易", "动土", "嫁娶"];
      let condition = list[e];
      this.getMonthInfo(condition);
    },

    open() {
      this.getMonthInfo();
      this.$refs.calendar.open();
    },
    close() {},
    change(e) {},
    confirm(e) {
      this.date = e.fulldate;
      this.getYellowResult();
    },
    monthSwitch(e) {
      this.Month = `${e.year}-${e.month < 10 ? "0" + e.month : e.month}`;
      this.getMonthInfo();
    },

    //获取当前年月日
    getNowTime() {
      //获取当前时间兼容系统

      //获取当前时间，格式YYYY-MM-DD HH:mm:ss 兼容ios

      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      this.date = `${year}-${month < 10 ? "0" + month : month}-${
        day < 10 ? "0" + day : day
      }`;

      this.Month = `${year}-${month < 10 ? "0" + month : month}`;
      this.getYellowResult();
    },

    changeLog(e) {
      this.date = e.fullDate + " 00:00:00";
      this.getYellowResult();
    },

    getYellowResult() {
      getYellowCalendarApi({
        stringDate: this.date + " 00:00:00",
        birthDay: uni.getStorageSync("userInfo").birthDay || "",
      }).then((res) => {
        const { code, data } = res;
        if (code == 200) {
          data.luckList = [
            data.todayLuck,
            data.tomorrowday,
            data.dayAfterTomorrowday,
          ];
          const { jzJx } = res.data;
          let list = [
            jzJx.ziShi,
            jzJx.chouShi,
            jzJx.yinShi,
            jzJx.maoShi,
            jzJx.chenShi,
            jzJx.siShi,
            jzJx.wuShi,
            jzJx.weiShi,
            jzJx.shenShi,
            jzJx.youShi,
            jzJx.xuShi,
            jzJx.haiShi,
          ];

          data.jzJxList = list;
          this.dayDetail = data;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.lunar {
  height: 62rpx;
  font-size: 64rpx;
  text-align: center;
  font-weight: 800;
  color: #ca4336;
  margin-top: 22rpx;
}

.bazi {
  display: flex;
  justify-content: center;
  font-size: 24rpx;
  color: #ca4336;
  line-height: 36rpx;
  margin-top: 22rpx;
  //所有子元素 都有margin-right: 10rpx;
  > * {
    margin-right: 10rpx;
  }
}
.label-item {
  display: flex;
  margin-left: 12rpx;
}
.dayYi {
  display: flex;
}
.Yi-label {
  font-size: 32rpx;
  color: #333;
  margin-right: 20rpx;
}
.card {
  background: #fff;
  border: 1px solid #ca4336;
  border-radius: 12rpx;
  padding: 26rpx;
}
.hourCard {
  margin-top: 28rpx;
}
.select_time {
  padding: 0 30rpx 200rpx 30rpx;
  height: 100%;
}
.luck_detail {
  padding-top: 28rpx;
  position: relative;

  > * {
    font-size: 28rpx;
    color: #999999;
    line-height: 36rpx;
  }
}
.date_box {
  font-size: 24rpx;
  padding-top: 10rpx;
  color: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 1.3;
}
.icon-arrow {
  width: 19rpx;
  height: 11rpx;
  margin-left: 14rpx;
}
.luck-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24rpx;
}

.luck-today {
  font-size: 24rpx;
  color: #262626;
  margin-right: 20rpx;
}
.luck-score {
  font-size: 24rpx;
  margin-left: 24rpx;
  color: #262626;
}

.hour_Yi {
  width: 628rpx;
  height: 692rpx;
  background: url("@/static/images/calendar/bgc-hour.png") no-repeat;
  background-size: contain;
  position: relative;
}

.emblem {
  position: absolute;
  top: 46%;
  left: 51%;
  right: 0;
  bottom: 0;
  transform: translate(-50%, -50%);
  width: 320rpx;
  height: 300rpx;
  border-radius: 50%;
  color: #8e9ba2;
  text-align: center;
  overflow: hidden;
}

.emblem .text {
  position: absolute;
  display: inline-block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 12px;
  transition: all 0.5s cubic-bezier(0, 0, 0, 1);
  font-weight: bold;
  font-size: 30rpx;
}

.ever_title {
  padding: 48rpx 0 24rpx 0;
  font-size: 36rpx;
  color: #262626;
  text-align: center;
}

.dress_box {
  display: flex;
  font-size: 30rpx;
  align-items: center;
  img {
    width: 34rpx;
    height: 34rpx;
    margin-right: 10rpx;
  }
}
.dress_content {
  font-size: 28rpx;
  color: #999999;
  margin-top: 12rpx;
}

.luck_title {
  font-size: 32rpx;
  color: #fff;
  margin-bottom: 30rpx;
  text-align: center;
  height: 80rpx;
  border-radius: 8rpx;
  background: #ca4336;
  font-weight: bold;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login_tip {
  width: 100%;
  height: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #fff;
  background: #ca4336;
  font-weight: bold;
  position: absolute;
  bottom: -80rpx;
  border-top-left-radius: 12rpx;
  border-top-right-radius: 12rpx;
  left: 0;
  z-index: 2;
}
.overly_box {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 12rpx;
  width: calc(100vw - 60rpx);
  height: 1500rpx;
  //背景色
  background-color: rgba(0, 0, 0, 0.75);
  //层级
  z-index: 999;
  //显示
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color: #fff;

  z-index: 1;
  //模糊
  backdrop-filter: blur(2px);
}

.ad_box {
  width: 100%;
  height: 70rpx;
  img {
    width: 100%;
    height: 100%;
  }
}
.dress_bottom {
  width: 100%;
  height: 56rpx;
  background: #ca4336;
  color: #fff;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yunshi-login-btn {
  width: 360rpx;
  height: 80rpx;
  border-radius: 20rpx;
  background: #ca4336;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: calc(50% - 180rpx);
  z-index: 2;
}
</style>